{{ extend './layout/main.html' }}

{{ block 'style' }}
<style type="text/css">
    #pwd-level div {
        height: 30px;
        width: 30px;
        display: inline-block;
        float: left;
    }

    #pwd-level span {
        display: inline-block;
        float: left;
    }

</style>
{{ /block }}

{{ block 'content' }}
<link href="/public/css/register.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
</script>
<div class="aw-register-box">
    <div class="mod-head">
        <a href="/"></a>
        <h1>注册新用户</h1>
    </div>
    <div class="mod-body">
        <form action="" class="aw-register-form" method="post" id="register_form">
            <ul>
                <li class="alert alert-danger hide error_message text-left">
                    <i class="icon icon-delete"></i> <em></em>
                </li>
                <li>
                    <input class="aw-register-name form-control" type="text" name="username" placeholder="用户名"
                        value="" id="username" />
                </li>
                <li>
                    <input class="aw-register-email form-control" type="text" placeholder="邮箱" name="email" value="" id="email" />
                </li>
                <li>
                    <input class="aw-register-pwd form-control" type="password" name="password" placeholder="密码" id="password" />
                </li>
                <div id='pwd-level'>
                    <span>密码强度:</span>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
                <hr />
                <li class="aw-register-verify">
                    <img class="pull-right" width="120" src="/user/get-pic" onclick="this.src='/user/get-pic?v=' + Date.now()">
                    <input type="text" class="form-control" name="v_code" placeholder="验证码" />
                </li>
                <li class="last">
                    <label>
                        <input type="checkbox" checked="checked" value="agree" /> 我同意</label> <a href="javascript:;"
                        class="aw-agreement-btn">用户协议</a>
                    <a href="/login" class="pull-right">已有账号?</a>
                    <div class="aw-regiter-agreement hide">
                        <div class="aw-register-agreement-txt" id="register_agreement"></div>
                    </div>
                </li>
                <li class="clearfix">
                    <button type="submit" class="btn btn-large btn-blue btn-block">
                        注册
                    </button>
                </li>
            </ul>
        </form>
    </div>
</div>

<script type="text/javascript">
    var checkUsername = (function() {
        var timer;
        var prevUsername;
        return function () {
            var that = this;
            clearTimeout(timer);

            timer = setTimeout(function() {
                var username = $.trim($(that).val());
                if (prevUsername === username) return;
                // console.log(username);

                if (username) {
                    $.ajax({
                        url: '/user/check-username',
                        type: 'post',
                        data: {
                            username: username
                        },
                        dataType: 'json',
                        success: function(data) {
                            prevUsername = username;
                            alert(data.msg);
                        }
                    })
                }

            }, 500);
        }
        
    })();
    $('#username').on('keyup', checkUsername);
    
    // 验证密码强度
    function checkPwdLevel(str) {
        var tempLevel = 0;
        var reg1 = /\d/; // 数字
        var reg2 = /[a-zA-Z]/; // 字母
        var reg3 = /\W/; // 特殊字符

        if (reg1.test(str)) tempLevel ++;
        if (reg2.test(str)) tempLevel ++;
        if (reg3.test(str)) tempLevel ++;

        return tempLevel;
    }
    $('#password').on('keyup', function(e) {
        var pwd = $(this).val();
        var level = checkPwdLevel(pwd);
        // 密码强度 颜色值
        var colors = ['yellowgreen', 'Darkorange', 'OrangeRed'];

        // 查找所有标识密码强度的 div
        var divs = $('#pwd-level').find('div');
        // 清空所有颜色值
        for (var i = 0, len = divs.length; i < len; i++) {
            divs[i].style.backgroundColor = '';
        }

        // 根据密码强度等级来显示 div 的背景颜色
        for (var i = 0; i < level; i++) {
            divs[i].style.backgroundColor = colors[i];
        }
    })

    // 获取所有输入框的 key-value
    $('#register_form').on('submit', function(e) {
        // 禁止默认提交
        e.preventDefault();
        var formData = $(this).serialize(); // 表单序列化  username=xxx&password=xxx

        $.ajax({
            url: '/user/do-register',
            type: 'post',
            data: formData,
            dataType: 'json',
            success: function(data) {
                if (data.code === '001') {
                    if (confirm('注册成功, 是否去登录?')) {
                        window.location.href = '/user/login';
                    }
                } else {
                    alert(data.msg);
                }
            }
        })
    })

</script>
{{ /block  }}
